<template>
  <div id="app">
    <div id="main" style="width:1800px;height:800px;"></div>
     <el-button type="primary" @click="aaa()">主要按钮</el-button>
  </div>
</template>

<script>
import {
    getList
} from "@/api/echarts";

import{formatDate} from "@/utils/formatDate";
export default {
  name: "app",
   data() {
        return {
            date:[],
            // list: ["17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日","ss"],
            list: [],
            cv:[],
            cvpos:[],
            qv8:[],
            qv5:[],
            qv2:[],
        };
    },
  methods: {
      
   aaa(){
     var that =this;
      getList().then(function (res) {
          console.log(res)
            // var date = []
           that.date=res.data;
           var aaa = that.date;
            var newList = []
           for(var i=0;i< aaa.length;i++){
                let date = new Date(aaa [i].date )
                let ftdate = formatDate(date, 'yyyy-MM-dd')
                 console.info(i +":"+ ftdate );
                 that.list.push(ftdate);
                 that.cv.push(aaa[i].cv);

                 that.cvpos.push(aaa[i].cvpos);
                 that.qv8.push(aaa[i].q8v);
                 that.qv5.push(aaa[i].q5v);
                 that.qv2.push(aaa[i].q2v);
                 
           }    
           
         console.log(newList)
        console.log(res) 
        that.drawChart();
    });
    
   },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
    color: ['#ed7a2c', '#5b9bd5', '#a5a5a5','#a5a6a4'],
    grid: {
        bottom: 30,
        weight: 1800
    },
    title: {
        text: 'demo',
        x: 'center',
        textStyle: {
            fontWeight: 400,
            fontSize: '13'
        }
    },
    tooltip: {
        trigger: 'axis',
        confine: true,
        textStyle: {
            fontSize: 12
        }
    },
    xAxis: {
        type: "category",
        data: this.list,
    },
    yAxis: {
        type: "value",
    },
    series: [{
        name: "当前值",
        type: "line",
        markLine: {
            lineStyle: {
                width: 2
            },
            label: {
                position: "insideEndTop",
                formatter: "{b}",
                color: "#333"
            },
            symbolSize: 0,
            data: [{
                name: "红色风险",
                yAxis: 720,
                lineStyle: {
                    color: "#f60902"
                }
            }, {
                name: "橙色风险",
                yAxis: 240,
                lineStyle: {
                    color: "#f89933"
                }
            }, {
                name: "黄色风险",
                yAxis: 80,
                lineStyle: {
                    color: "#facc00"
                }
            }, {
                name: "蓝色风险",
                yAxis: 50,
                lineStyle: {
                    color: "#65a1d7"
                }
            }]
        },
        data: this.cv
    }, {
        name: "加权平均值",
        type: "line",
        data: this.cvpos
    }, {
        name: "20%分位点",
        type: "line",
        data: this.qv2
    }, {
        name: "50%分位点",
        type: "line",
        data: this.qv5
    }, {
        name: "80%分位点",
        type: "line",
        data: this.qv8
    }]
};
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    // this.drawChart();
  }
};
</script>
